<div class="wmm-module">
    <div class="layui-form-item">

        <form id="search-form" class="layui-form" action="javascript:;">
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm " onclick="renders.box(null,true)"><i
                        class="layui-icon layui-icon-add-circle "></i> 添加资源</button>
            </div>
            <div class="layui-inline" style="width:300px">
                <select name="appsId" xm-select="appsId" xm-select-skin="normal">
                    <option value="">选择平台搜索</option>
                </select>
            </div>
            <div class="layui-inline">
                <input type="text" name="resourceName" autocomplete="off" lay-verify="required" placeholder="请输入名称/资源编码"
                    class="layui-input">
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal datatable-search"><i class="layui-icon layui-icon-search search-icon"></i>
                    查询</button>
            </div>
        </form>
    </div>

    <div>
        <div id="tb-sys-resource" lay-filter="tb-sys-resource">
        </div>
    </div>
</div>


<template id="tmp-resource-form">
    <div style="padding:10px">
        <form class="layui-form" lay-filter="resource-form" action="javascript:;">
            <input type="hidden" value="" name="id" />

            <div class="layui-form-item">
                <label class="layui-form-label">所属平台<span class="required-star">*</span></label>
                <div class="layui-inline" style="width:300px">
                    <select name="appsId" xm-select="appsIdBox" xm-select-skin="normal">
                        <option value="">所有平台</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">资源名称<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="resourceName" autocomplete="off" lay-verify="required" placeholder="请输入资源名称"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">资源编码</label>
                <div class="layui-input-block">
                    <input type="text" name="resourceCode" placeholder="请输入资源编码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">资源路径<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="url" lay-verify="required" placeholder="请填写接口路径，(资源的路径一般为名词)" autocomplete="off"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="resource">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>



<script>

    new Wmm({

        vars: {
            table: {},
            appList: undefined
        },
        imports: ["form", "api", "datatable", "formSelects", "sysTools"],
        listener: function () {
            var itv = setInterval(function () {
                if (!layui.formSelects) {
                    return;
                }
                layui.formSelects.on('appsId', function (id, vals, val, isAdd, isDisabled) {
                    setTimeout(function (){vars.table.setQueryObject({appsId: utils.toJSONData(document.querySelector("#search-form")).appsId})},100);
                });
                clearInterval(itv);
            }, 200);
            fb.form.on('submit(resource)', function (data) {
                var dataObject = data.field;
                dataObject.appsId = fb.formSelects.value("appsIdBox", "val");
                if (dataObject.id) {
                    //update
                    fb.api.resource.update(dataObject, function () {
                        layer.closeAll();
                        layer.msg("改好了");
                        vars.table.flush(true);
                    });
                    return;
                }
                //insert
                fb.api.resource.add(dataObject, function () {
                    layer.msg("加好了...你继续");
                    vars.table.flush(true);
                });
            });
        },
        renders: {
            box: function (data, isCreate) {
                layer.open({
                    type: 1,
                    title: (isCreate ? "添加" : "修改") + "资源",
                    content: document.querySelector("#tmp-resource-form").innerHTML,
                    area: ['500px', '330px'],
                    success: function () {
                        sysTools.renderAppSelect("appsIdBox");
                        if (!isCreate) {
                            //表单初始赋值
                            fb.form.val('resource-form', data)
                            fb.formSelects.value("appsIdBox", data.appsId);

                        }
                        fb.form.render();
                    }
                });
            },



            render: function () {
                sysTools.renderAppSelect();
                vars.table = new DataTable({
                    el: "tb-sys-resource",
                    formEl: "search-form",
                    url: fb.api.resource.url,
                    defines: [
                        {
                            head: "资源编码",
                            prop: "resource_code",
                        }, {
                            head: "资源名称",
                            prop: "resource_name",
                        }, {
                            head: "资源路径",
                            prop: "url",
                        }, {
                            head: "创建时间",
                            prop: "gmt_create",
                            type: "datetime"
                        }
                    ],
                    handles: [
                        {
                            edit: function (data) {
                                return renders.box(data, false);
                            }
                        }, {
                            del: {
                                tip: "确定要删除吗？",
                                do: function (data) {
                                    fb.api.resource.delete(data.id, function () {
                                        layer.closeAll();
                                        layer.msg("删除成功");
                                        vars.table.flush(true);
                                    })
                                }
                            }
                        },

                    ],
                });

            },
        },

    });



</script>